<template>
  <main class="details-content">
    <header><van-icon name="arrow-left" @click="back" /> <span>详情</span></header>
    <div style="color: rgb(117, 175, 255);text-align: right;margin:10px;" @click="collect">{{
      state.isCollect ? '已收藏' : '收藏'
    }}</div>
    <div v-for="item in state.listData" :key="item.key">
      <h1>{{ item.infoName }}</h1>
      <div class="page-info">
        <!-- <span class="time">2024-01-24 12:00:00</span> -->

      </div>
      <p>{{ item.infoDesc }}</p>
    </div>

  </main>
</template>
<script setup>
const router = useRouter()
const route = useRoute()
import { showNotify } from 'vant'
import { onMounted, reactive } from 'vue'
import { lawLaw, lawStd, lawAct, collectCollect, collectQuery } from "@/api";

const state = reactive({
  isCollect: false,
  listData: [],
  routeData: JSON.parse(route.query.data)
})
const back = () => {
  router.go(-1)
}
const collect = () => {
  if (state.isCollect) {
    showNotify({ type: 'danger', message: '不能取消收藏' })
    return
  }
  collectCollect({
    data: {},
    key: state.routeData.key,
    name: state.routeData.name,
    type: state.routeData.type
  }).then((res) => {
    if (res.code == '0') {
      showNotify({ type: 'success', message: '收藏成功' })
      query()
    } else {
      showNotify({ type: 'danger', message: '收藏失败' })

    }
    // state.isCollect = !state.isCollect
    // if (state.isCollect) {
    //   showNotify({ type: 'success', message: '收藏成功' })
    // } else {
    //   showNotify({ type: 'success', message: '已取消收藏' })
    // }
  })
}
const getCollectQuery = () => {
  collectQuery().then(res => {
    if (res.code == '0') {
      let arr = []
      res.data.forEach(item => {
        arr.push(item.n.key)
      })
      if (arr.includes(state.routeData.key)) {
        state.isCollect = true
      }
    }
  })
}
const queryType = ref('1')
const query = () => {
  if (queryType.value == '1') {
    lawLaw({ id: route.query.key }).then((res) => {
      state.listData = res.nodes.filter((item) => item.type === "法律法规条款项")
      state.listData.forEach(item => {
        item.infoName = item['条款项']
        item.infoDesc = item['法律名称']
      })
      getCollectQuery()
    })
  } else if (queryType.value == '2') {
    lawStd({ id: route.query.key }).then((res) => {
      state.listData = res.nodes.filter((item) => item.type !== "裁量基准")
      console.log(state.listData)
      state.listData.forEach(item => {
        item.infoName = item['结果']
        item.infoDesc = item['描述']
      })
      getCollectQuery()
    })
  } else if (queryType.value == '3') {
    lawAct({ id: route.query.key }).then((res) => {
      state.listData = res.nodes
      state.listData.forEach(item => {
        item.infoName = item.name
        item.infoDesc = item['执法权名称']
      })
      getCollectQuery()
    })
  }
}
onMounted(() => {
  queryType.value = route.query.type
  query()

})
</script>
<style lang="scss" scoped>
.details-content {
  padding: 0 20px;

  header {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    height: 60px;

    span {
      display: flex;
      align-items: center;
      margin: auto;
    }
  }

  h1 {
    margin: 0;
    font-size: 18px;
  }

  .page-info {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    color: #666;
  }

  p {
    color: #666;
  }
}
</style>
